<!DOCTYPE html>
<html>
<head>
    <title>etl_task_detail</title>
    <#include "/sys/header.html"/>
    <link rel="stylesheet" href="${base}/statics/plugins/codemirror/lib/codemirror.css"/>
    <link rel="stylesheet" href="${base}/statics/plugins/codemirror/theme/rubyblue.css"/>
    <link rel="stylesheet" href="${base}/statics/plugins/codemirror/addon/hint/show-hint.css"/>
    <link rel="stylesheet" href="${base}/statics/plugins/autosuggest/autosuggest.css"/>
    <script src="${base}/statics/plugins/codemirror/lib/codemirror.js"></script>
    <script src="${base}/statics/plugins/codemirror/mode/sql/sql.js"></script>
    <script src="${base}/statics/plugins/codemirror/addon/display/fullscreen.js"></script>
    <script src="${base}/statics/plugins/codemirror/addon/hint/show-hint.js"></script>
    <script src="${base}/statics/plugins/codemirror/addon/hint/sql-hint.js"></script>
    <script src="${base}/statics/plugins/autosuggest/autosuggest.js"></script>
    <script src="${base}/statics/plugins/jquery/jquery.validate.min.js"></script>
    <script src="${base}/statics/libs/jquery.bootstrap.wizard.js"></script>
    <style>
        .col-sm-2 {
            width: 10%;
        }

        .form-horizontal {
            padding-top: 0px;
        }

        .container ul li {
            width: 25%;
            text-align: center;
        }

        .panel {
            margin-bottom: 0px !important;
        }

        .modal {
            top: 50%;
        }
    </style>
</head>
<body>
<div class="panel panel-default" id="rrapp" v-cloak>
    <div class="panel-heading">{{title}}</div>
    <section id="wizard">
        <form class="form-horizontal" style="width: 100%;">
            <div class="form-group">
            </div>
            <div class="form-group">
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">作业ID</div>
                <div class="col-sm-4">
                    <input type="text" class="form-control" v-model="workItem.workId" placeholder="作业ID" readonly/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">详情名称</div>
                <div class="col-sm-4">
                    <input type="text" class="form-control" v-model="workItem.itemName" placeholder="详情名称"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">状态</div>
                <div class="col-sm-4">
                    <label class="radio-inline">
                        <input type="radio" name="status" value="0" v-model="workItem.status"/> 停用
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="status" value="1" v-model="workItem.status"/> 正常
                    </label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">执行顺序</div>
                <div class="col-sm-4">
                    <input type="number" class="form-control" v-model="workItem.execNum" placeholder="执行顺序"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">执行类型</div>
                <div class="col-sm-4">
                    <select class="form-control" v-model="workItem.detailMode" placeholder="执行类型"
                            @change="changeDetailMode">
                        <template v-for="option in detailModes">
                            <option :value="option.dictCode" v-if="option.dictCode == workItem.detailMode" selected>
                                {{ option.dictName }}
                            </option>
                            <option :value="option.dictCode" v-else>
                                {{ option.dictName }}
                            </option>
                        </template>
                    </select>
                </div>
            </div>
            <div class="form-group"
                 v-show="workItem.detailMode == 'SQL_M'||workItem.detailMode == 'REDIS_M' ? true : false">
                <div class="col-sm-2 control-label">执行内容</div>
                <div class="col-sm-10">
                    <div id="rootwizard" style="margin-left: 15px;">
                        <div class="navbar">
                            <div class="navbar-inner">
                                <div class="container">
                                    <ul>
                                        <li><a href="#tab1" data-toggle="tab"><span class="label">第一步</span> Reader</a>
                                        </li>
                                        <li><a href="#tab2" data-toggle="tab"><span class="label">第二步</span>
                                            Processor</a></li>
                                        <li><a href="#tab3" data-toggle="tab"><span class="label">第三步</span> Writer</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div id="bar" class="progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                                 aria-valuemax="100" style="width: 0%;"></div>
                        </div>
                        <div class="tab-content">
                            <div class="tab-pane" id="tab1">
                                <div class="form-group">
                                    <div class="col-sm-3 control-label">数据源From</div>
                                    <div class="col-sm-4">
                                        <select class="form-control" v-model="workItem.dbKeyFrom"
                                                placeholder="数据源From" @change="changeDbKeyFrom">
                                            <template v-for="option in dbKeys">
                                                <option :value="option.dictCode"
                                                        v-if="option.dictCode == workItem.dbKeyFrom" selected>
                                                    {{ option.dictName }}
                                                </option>
                                                <option :value="option.dictCode" v-else>
                                                    {{ option.dictName }}
                                                </option>
                                            </template>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-3 control-label"></div>
                                    <div class="col-sm-4">
                                        <label class="radio-inline">
                                            <input type="radio" name="readerType" value="0"
                                                   v-model="workItem.readerType" @click="clickReaderType"/> 表生成
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" name="readerType" value="1"
                                                   v-model="workItem.readerType" @click="clickReaderType"/> 自定义sql
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group" id="div_table">
                                    <div class="col-sm-3 control-label">表名</div>
                                    <div class="col-sm-4">
                                        <input id="tdTableName" type="text" class="form-control"
                                               v-model="workItem.tableFrom" placeholder="表名"/>
                                    </div>
                                    <div class="col-sm-2">
                                        <button type="button" class="btn btn-info btn-xs" style="margin-top: 10px;"
                                                @click="createSelectSql">生成select语句
                                        </button>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-3 control-label">select语句</div>
                                    <div class="col-sm-9">
									<textarea id="ta-select" rows="3" class="form-control"
                                              v-model="workItem.selectSql" placeholder="select语句">
									</textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="tab2">
                                <div class="form-group">
                                    <div class="col-sm-3 control-label">delete语句</div>
                                    <div class="col-sm-9">
									<textarea id="ta-delete" rows="3" class="form-control"
                                              v-model="workItem.deleteSql" placeholder="delete语句">
									</textarea>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-sm-3 control-label">自定义处理</div>
                                    <div class="col-sm-9 control-inline">
                                        <template>
                                            <div>
                                                <el-radio-group v-model="workItem.processClassType">
                                                    <el-radio-button label="javaClass"></el-radio-button>
                                                    <el-radio-button label="springBean"></el-radio-button>
                                                </el-radio-group>
                                            </div>
                                        </template>
                                        <input type="text" class="form-control"
                                               v-show="workItem.processClassType == 'javaClass' ? true : false"
                                               v-model="workItem.processClass" placeholder="javaClass"/>

                                        <select class="form-control" v-model="workItem.processBean"
                                                v-show="workItem.processClassType == 'springBean' ? true : false"
                                                placeholder="processBean">
                                            <option value=""></option>
                                            <template v-for="option in processBeans">
                                                <option :value="option.dictCode"
                                                        v-if="option.dictCode == workItem.processBean" selected>
                                                    {{ option.dictName }}
                                                </option>
                                                <option :value="option.dictCode" v-else>
                                                    {{ option.dictName }}
                                                </option>
                                            </template>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-sm-3 control-label">回写SQL</div>
                                    <div class="col-sm-9">
                                        <table class="table table-condensed table-bordered table-hover table-striped"
                                               style="width: 100%;table-layout:fixed">
                                            <thead>
                                            <tr>
                                                <th width="40%">selectOne</th>
                                                <th width="40%">update</th>
                                                <th></th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr class="info">
                                                <td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
                                                    {{ workItem.selectOne }}
                                                </td>
                                                <td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
                                                    {{ workItem.updateSql }}
                                                </td>
                                                <td>
                                                    <button type="button" class="btn btn-primary" data-toggle="modal"
                                                            data-target="#myModal">编辑
                                                    </button>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <!-- 模态框（Modal） -->
                                <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
                                     aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal"
                                                        aria-hidden="true">&times;
                                                </button>
                                                <h4 class="modal-title" id="myModalLabel">回写SQL</h4>
                                            </div>
                                            <div class="modal-body">
                                                <div class="form-group">
											<textarea id="ta-selectOne" rows="5" class="form-control"
                                                      v-model="workItem.selectOne" placeholder="selectOne">
									       </textarea>
                                                </div>
                                                <div class="form-group">
											<textarea id="ta-updateSql" rows="5" class="form-control"
                                                      v-model="workItem.updateSql" placeholder="updateSql">
									       </textarea>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                                </button>
                                            </div>
                                        </div><!-- /.modal-content -->
                                    </div><!-- /.modal -->
                                </div>

                                <div class="form-group">
                                    <div class="col-sm-3 control-label">子模块</div>
                                    <div class="col-sm-9">
                                        <table id="subJqGrid"></table>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane" id="tab3">
                                <div v-show="workItem.detailMode == 'SQL_M'? true : false">
                                    <div class="form-group">
                                        <div class="col-sm-3 control-label">数据源To</div>
                                        <div class="col-sm-4">
                                            <select class="form-control" v-model="workItem.dbKeyTo"
                                                    placeholder="数据源To" @change="changeDbKeyTo">
                                                <template v-for="option in dbKeys">
                                                    <option :value="option.dictCode"
                                                            v-if="option.dictCode == workItem.dbKeyTo" selected>
                                                        {{ option.dictName }}
                                                    </option>
                                                    <option :value="option.dictCode" v-else>
                                                        {{ option.dictName }}
                                                    </option>
                                                </template>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group" id="div_tableTo">
                                        <div class="col-sm-3 control-label">表To</div>
                                        <div class="col-sm-4">
                                            <input id="tdTableTo" type="text" class="form-control"
                                                   v-model="workItem.tableTo" placeholder="表To"/>
                                        </div>
                                        <div class="col-sm-2">
                                            <button type="button" class="btn btn-info btn-xs" style="margin-top: 10px;"
                                                    @click="createInsertSql">生成insert语句
                                            </button>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-3 control-label">insert语句</div>
                                        <div class="col-sm-9">
                                        <textarea id="ta-insert" rows="3" class="form-control"
                                                  v-model="workItem.insertSql" placeholder="insert语句">
                                        </textarea>
                                        </div>
                                    </div>
                                </div>
                                <div v-show="workItem.detailMode == 'REDIS_M' ? true : false">
                                    <div class="form-group">
                                        <div class="col-sm-3 control-label">缓存名称</div>
                                        <div class="col-sm-4">
                                            <input type="text" class="form-control" v-model="workItem.cacheName"
                                                   placeholder="缓存名称"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-3 control-label">缓存key对应字段</div>
                                        <div class="col-sm-4">
                                            <input type="text" class="form-control" v-model="workItem.cacheKeyField"
                                                   placeholder="缓存key对应字段"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-3 control-label">缓存类型</div>
                                        <div class="col-sm-4">
                                            <select class="form-control" v-model="workItem.cacheType"
                                                    placeholder="缓存类型" @change="changeCacheType">
                                                <template v-for="option in cacheTypes">
                                                    <option :value="option.dictCode"
                                                            v-if="option.dictCode == workItem.dbKeyTo" selected>
                                                        {{ option.dictName }}
                                                    </option>
                                                    <option :value="option.dictCode" v-else>
                                                        {{ option.dictName }}
                                                    </option>
                                                </template>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-3 control-label">时效</div>
                                        <div class="col-sm-4">
                                            <div class="input-group">
                                                <input type="number" class="form-control"
                                                       v-model="workItem.expireTime" placeholder="时效"/>
                                                <span class="input-group-addon">秒</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group" v-show="workItem.detailMode == 'BEAN_M' ? true : false">
                <div class="col-sm-2 control-label">bean名称</div>
                <div class="col-sm-4">
                    <select class="form-control" v-model="workItem.beanName" placeholder="bean名称"
                            @change="changeBeanName">
                        <template v-for="option in beans">
                            <option :value="option.dictCode" v-if="option.dictCode == workItem.beanName" selected>
                                {{ option.dictName }}
                            </option>
                            <option :value="option.dictCode" v-else>
                                {{ option.dictName }}
                            </option>
                        </template>
                    </select>
                </div>
            </div>
            <div class="form-group" v-show="workItem.detailMode == 'beanMode' ? true : false">
                <div class="col-sm-2 control-label">bean方法</div>
                <div class="col-sm-4">
                    <select class="form-control" v-model="workItem.methodName" placeholder="bean方法"
                            @change="changeBeanMethod">
                        <template v-for="option in methods">
                            <option :value="option.dictCode" v-if="option.dictCode == workItem.methodName" selected>
                                {{ option.dictName }}
                            </option>
                            <option :value="option.dictCode" v-else>
                                {{ option.dictName }}
                            </option>
                        </template>
                    </select>
                </div>
            </div>
            <div class="form-group" v-show="workItem.detailMode == 'BEAN_M' ? true : false">
                <div class="col-sm-2 control-label">bean参数</div>
                <div class="col-sm-4">
                    <input type="text" class="form-control" v-model="workItem.params" placeholder="bean参数"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-4 control-label"></div>
                <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
                &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="back" value="返回"/>
            </div>
        </form>
    </section>

    <div id="subLayer" style="padding:10px;display: none">
        <div class="main-content">
            <div class="box box-main">
                <form class="form-horizontal">
                    <div class="box-body">
                        <div class="form-group">
                            <div class="col-sm-4 control-label">名称</div>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" v-model="workItemSub.subName"
                                       placeholder="名称"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-4 control-label">类型</div>
                            <div class="col-sm-8">
                                <select class="form-control" v-model="workItemSub.subType" @change="changeSubType"
                                        placeholder="类型">
                                    <template v-for="option in subTypes">
                                        <option :value="option.dictCode"
                                                v-if="option.dictCode == workItemSub.subType" selected>
                                            {{ option.dictName }}
                                        </option>
                                        <option :value="option.dictCode" v-else>
                                            {{ option.dictName }}
                                        </option>
                                    </template>
                                </select>
                            </div>
                        </div>

                        <div class="form-group" v-show="workItemSub.subType == 'SQL' ? true : false">
                            <div class="col-sm-4 control-label">数据源key</div>
                            <div class="col-sm-8">
                                <select class="form-control" v-model="workItemSub.dbKeyFrom"
                                        placeholder="数据源key">
                                    <template v-for="option in dbKeys">
                                        <option :value="option.dictCode"
                                                v-if="option.dictCode == workItemSub.dbKeyFrom" selected>
                                            {{ option.dictName }}
                                        </option>
                                        <option :value="option.dictCode" v-else>
                                            {{ option.dictName }}
                                        </option>
                                    </template>
                                </select>
                            </div>
                        </div>
                        <div class="form-group" v-show="workItemSub.subType == 'SQL' ? true : false">
                            <div class="col-sm-4 control-label">子sql</div>
                            <div class="col-sm-8">
                                <textarea rows="10" class="form-control" v-model="workItemSub.subSql"
                                          placeholder="子sql">
			                    </textarea>
                            </div>
                        </div>

                        <div class="form-group" v-show="workItemSub.subType == 'REDIS' ? true : false">
                            <div class="col-sm-4 control-label">缓存名称</div>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" v-model="workItemSub.cacheName"
                                       placeholder="redis缓存名称"/>
                            </div>
                        </div>
                        <div class="form-group" v-show="workItemSub.subType == 'REDIS' ? true : false">
                            <div class="col-sm-4 control-label">缓存对应字段</div>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" v-model="workItemSub.cacheKeyField"
                                       placeholder="缓存Key对应字段"/>
                            </div>
                        </div>
                        <div class="form-group" v-show="workItemSub.subType == 'REDIS' ? true : false">
                            <div class="col-sm-4 control-label">缓存获取字段</div>
                            <div class="col-sm-8">
                                <textarea rows="10" class="form-control" v-model="workItemSub.cacheGetFields"
                                          placeholder="缓存获取的字段,多个字段用英文逗号分隔">
			                    </textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-4 control-label">排序号</div>
                            <div class="col-sm-8">
                                <input type="number" class="form-control" v-model="workItemSub.orderNum"
                                       placeholder="排序号"/>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>


<script src="${base}/js/work/workItem_add.js?_${.now?string['yyyyMMddhhmmSS']}"></script>
</body>
</html>
